<template>
<li class="list-group-item">
  <div class="mdi mdi-menu" style="display:inline-block;">
    <div class="custom-control custom-checkbox mr-sm-2">
      <input type="checkbox" class="custom-control-input" v-model="permitIds" :value="permit.permitId" :id="'permit' + permit.permitId">
      <label class="custom-control-label" :for="'permit' + permit.permitId">{{permit.name}}</label>
    </div>
  </div>
  <div class="mdi mdi-all-inclusive" v-for="auth in permit.auths" :key="auth.permitId" style="display:inline-block;">
    <div class="custom-control custom-checkbox mr-sm-2">
      <input type="checkbox" class="custom-control-input" v-model="permitIds" :value="auth.permitId" :id="'permit' + auth.permitId">
      <label class="custom-control-label" :for="'permit' + auth.permitId">{{auth.name}}</label>
    </div>
  </div>
  <ul class="list-group" v-if="permit.permits && permit.permits.length > 0">
    <RolePermitItem v-for="(subPerm, subIndex) in permit.permits" :permits="permit.permits" :index="subIndex" :permit="subPerm"
      :key="subPerm.permitId" :checkedIds="checkedIds" />
  </ul>
</li>
</template>
<script>

  import RolePermitItem from './RolePermitItem'

  export default {
    name: "RolePermitItem",
    components: {
      RolePermitItem
    },
    props: {
      checkedIds: Array,
      index: Number,
      permit: Object,
    },
    data() {
      return {
        permitIds: []
      }
    },
    created() {
      this.permitIds = this.checkedIds
    },
    watch: {
      checkedIds() {
        this.permitIds = this.checkedIds
      }
    }
  }
</script>
<style scoped>
label {
	font-weight: 400;
}

.list-group-item {
	border: 0px;
	padding: 5px 20px;
}

.list-group .custom-checkbox {
	display: inline;
	padding-left: 16px;
}

.list-group .custom-control-label {
	position: initial;
}

.list-group .custom-checkbox .custom-control-label::before {
	top: 0px;
}

.list-group .custom-checkbox .custom-control-label::after {
	top: 0px;
}

.list-group .custom-checkbox .custom-control-label {
	font-weight: 0px;
}
</style>